<template>
  <div>
    <div class="midd">
      <div class="cat">
        <el-col :span="8">
          <el-card shadow="never">
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyWord"></el-input>
            <div class="p">
              <div style="display:inline-block;float:left;width:5%">
                <b style="line-height: 37px;">类别：</b>
              </div>

              <div style="display:inline-block;float:left;width:90%">
                <el-button
                  type="text"
                  v-for="item in categoryList"
                  :key="item.index"
                  @click="tagCat(item.category_id,item.category_name)"
                >{{item.category_name}}</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </div>
      <div class="catList">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">类别:</el-breadcrumb-item>
              <el-breadcrumb-item>{{leCat}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="text item scall">
            <el-row shadow="hover">
              <el-col :span="8" v-for="item in wksLists" :key="item.wk_id">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="item.wk_pic" class="image" />
                  <div style="padding: 14px;">
                    <b style="width:155px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="item.wk_name">{{item.wk_name}}</b>
                    <span style="float:right;font-size:12px">{{item.wk_create_time}}</span>
                    <div class="bottom clearfix">
                      <!-- <time class="time">作者</time> -->
                      <el-button type="text" class="button" @click="openVideo(item.wk_id)">详情</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div v-if="wksLists.length == 0">暂无此类别微课(*^▽^*)~</div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="cardDetail">
      <el-dialog
        title="作品详情"
        :visible.sync="dialogVisible"
        width="1200px"
        top="4vh"
        :before-close="closeDetail"
      >
        <el-card class="box-card">
          <video :src="wkDetail.wk_video_adress" controls id="a1_html5_api" preload="auto"></video>
          <div class="cardddd">
            <b>{{wkDetail.wk_name}}</b>
            <p style="display:flex;justify-content: space-between;">
              <span>作者：{{wkDetail.user_account}}</span>
              <span>时间：{{wkDetail.wk_create_time}}</span>
            </p>
            <p>作品描述：</p>
            <p style="text-indent:30px;">{{wkDetail.wk_introduce}}</p>
          </div>
        </el-card>
        <el-divider content-position="left">
          <i class="el-icon-chat-line-round"></i>
        </el-divider>
        <div
          class="block demo-drawer__content"
          v-show="dataEV == 1"
          style=" overflow: scroll !important;height:275px"
        >
          <el-timeline>
            <el-timeline-item placement="top" v-for="item of evData" :key="item.inde">
              <el-card>
                <p>
                  <img :src="item.user_pic" alt style="width:20px;hight:20px;border-r" />
                  <span style="padding-left:10px;font-size: 12px;">{{item.user_account}}</span>
                </p>
                <p style="padding-top:5px;font-size:14px">{{item.evaluate_message}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <p v-show="dataEV == 0" style="text-align: left;padding-left: 22px;height:100px">暂无评论(#^.^#)</p>
        <div class="comment" v-if="faBiao">
          <el-divider content-position="left">
            <i class="el-icon-s-comment"></i>
          </el-divider>
          <div style="width:90%;margin:0 auto;overflow: auto">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="evaluateMessage"
              maxlength="130"
              show-word-limit
              style="float:left;width:90%;line-height: normal;"
            ></el-input>
            <el-button
              style="float:right"
              class="el-icon-s-promotion"
              type="primary"
              plain
              @click="putMessage(wkDetail.wk_id)"
            >发表</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tabPosition: "left",
      dialogVisible: false,
      keyWord: "",
      wkDetail: {},
      dataEV: "",
      evData: {},
      evaluateMessage: "",
      pExamine: [],
      wksLists: [],
      categoryList: {},
      user: {},
      leCat: "全部",
      faBiao:true
    };
  },
  mounted() {
    this.getWks();
    this.getCategory();
    let a = sessionStorage.getItem("user");
    if (a != "undefined") {
      this.user = JSON.parse(a);
    }else{
      this.faBiao = false
    }

  },
  methods: {
    //获取微课
    getWks() {
      var that = this;
      that.$axios
        .get("apis/admin/wklist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var wksList = res.data.data;
              //console.log(wksList);
              var pExa = []; //审核通过
              for (var i = 0; i < wksList.length; i++) {
                wksList[i].wk_create_time = that
                  .$moment(wksList[i].wk_create_time)
                  .format("YYYY-MM-DD");
                if (wksList[i].wk_state == 1) {
                  //审核通过
                  wksList[i].wk_state = "审核通过";
                  pExa.push(wksList[i]);
                }
              }
              for (var i = 0; i < pExa.length; i++) {
                if (pExa[i].wk_success == 0) {
                  //获奖
                  pExa[i].wksucc = "未审核";
                  pExa[i].color = "color:#e6a23c";
                } else if (pExa[i].wk_success == 1) {
                  //获奖
                  pExa[i].wksucc = "已获奖";
                  pExa[i].color = "color:#67c23a";
                } else if (pExa[i].wk_success == 2) {
                  //获奖
                  pExa[i].wksucc = "未获奖";
                  pExa[i].color = "color:#f56c6c";
                }
              }
              that.pExamine = pExa;
              that.wksLists = pExa;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //打开详情
    openVideo(id) {
      var that = this;
      that.$axios
        .post(
          "apis/user/wkdetail",
          this.$qs.stringify({
            wkId: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            //console.log(res.data);

            if (res.data.status == 1) {
              var dataList = res.data.data.wk;
              console.log(dataList)
              that.dialogVisible = true;
              dataList.wk_create_time = that
                .$moment(dataList.wk_create_time)
                .format("YYYY-MM-DD");

              that.wkDetail = dataList;
              if (res.data.data.wk_evaluates.length != 0) {
                that.dataEV = 1;
                that.evData = res.data.data.wk_evaluates;
              } else if (res.data.data.wk_evaluates.length == 0) {
                that.dataEV = 0;
              }
              that.$message({
                message: "详情查询成功~~~~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //发表
    putMessage(id) {
      //console.log(id);
      let a = sessionStorage.getItem("user");
      
      var that = this;
      if (that.user != null && a != "undefined") {
        that.$axios
          .post(
            "apis/user/addevaluate",
            this.$qs.stringify({
              wkId: id,
              evaluateMessage: that.evaluateMessage,
              userId: that.user.user_id
            })
          )
          .then(function(res) {
            if (res.status == 200) {
              //console.log(res.data);

              if (res.data.status == 1) {
                that.openVideo(id);
                that.evaluateMessage = "";
                that.$message({
                  message: "评论发表成功~~~",
                  type: "success"
                });
              }
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.evaluateMessage = "";
        this.$notify({
          title: "警告",
          message: "请登录后或者账号审核后再来评论哟！！！",
          type: "warning"
        });
      }
    },
    //类别
    getCategory() {
      var that = this;
      that.$axios
        .get("apis/admin/categorylist")
        .then(function(res) {
          let listData = [
            {
              category_id: null,
              admin_id: 1,
              category_name: "全部"
            }
          ];
          if (res.status == 200) {
            if (res.data.status == 1) {
              //console.log(res.data.data);
              let list = res.data.data;
              for (var i = 0; i < list.length; i++) {
                listData.push(list[i]);
              }
              that.categoryList = listData;
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //类别列表点击
    tagCat(id, val) {
      //console.log(id);
      if (id != null) {
        var that = this;
        var catList = that.pExamine;
        //console.log(catList);
        that.leCat = val;
        var lbList = [];
        for (var i = 0; i < catList.length; i++) {
          if (id == catList[i].category_id) {
            lbList.push(catList[i]);
          } else {
          }
        }
        that.wksLists = lbList;
        //console.log(lbList);
      } else {
        this.leCat = val;
        this.getWks();
      }
    },
    closeDetail() {
      var video = document.getElementById("a1_html5_api");
      video.pause(); //暂停控制
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.midd {
  width: 1200px;
  margin: 10px auto;
  .cat {
    .el-col {
      width: 1200px;
      margin: 10px auto;
      display: block;
      .el-input {
        width: 30%;
      }
      .el-button {
        margin-left: 20px;
      }
    }
  }

  .catList {
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both;
    }

    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 257px;
      display: block;
      height: 184px;
    }
    .el-col-8 {
      width: 22.7%;
    }

    .el-col {
      margin: 12px;
    }

    .el-col-offset-2 {
      margin-left: 12px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }
  }
  .scall {
    height: 561px;
    overflow: scroll;
  }
}
.cardDetail {
  .el-card {
    width: 100%;
    .el-card__body {
      // width: 600px !important;
    }
    video {
      width: 55%;
      float: left;
      padding-bottom: 20px;
    }
    .cardddd {
      width: 40%;
      float: right;
    }
  }
  .block {
    width: 95%;
    margin: 0 auto;
    .el-card {
      width: 80% !important;
      .el-card__body {
        text-align: left !important;
        padding: 10px;
      }
      .el-icon-delete:hover {
        color: red;
      }
      p {
        margin: 0 !important;
      }
    }
    .el-timeline-item {
      padding-bottom: 0;
    }
  }
  .comment {
    background: #fff;
    margin-top: -43px;
    position: relative;
  }
}
</style>